<!DOCTYPE html>
<html>
<head>
    <title>配料数据测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .item { border: 1px solid #ccc; margin: 10px 0; padding: 10px; }
        .ingredients { color: #666; font-style: italic; }
    </style>
</head>
<body>
    <h1>菜单配料数据测试</h1>
    <div id="menu-items">加载中...</div>
    
    <script>
        async function loadMenuData() {
            try {
                const response = await fetch('/api/menu/public/items');
                const data = await response.json();
                
                const container = document.getElementById('menu-items');
                
                if (data.success && data.data && data.data.items) {
                    container.innerHTML = data.data.items.map(item => `
                        <div class="item">
                            <h3>${item.name} (${item.name_en || 'N/A'})</h3>
                            <p><strong>描述:</strong> ${item.description || 'N/A'}</p>
                            <p><strong>价格:</strong> ¥${item.price || 'N/A'}</p>
                            <p class="ingredients"><strong>主要配料:</strong> 
                                ${Array.isArray(item.main_ingredients) ? 
                                    item.main_ingredients.join(', ') : 
                                    (item.main_ingredients || '无配料信息')}
                            </p>
                        </div>
                    `).join('');
                } else {
                    container.innerHTML = '<p>无法加载菜单数据</p>';
                }
            } catch (error) {
                document.getElementById('menu-items').innerHTML = `<p>加载错误: ${error.message}</p>`;
            }
        }
        
        loadMenuData();
    </script>
</body>
</html>